<template>
  <view class="week-days">
    <view class="day-item" v-for="(day, index) in days" :key="index" :class="{ 'current-day': day.isCurrent }">
      <text class="day-name">{{day.name}}</text>
      <text class="day-number" :class="{ 'current-number': day.isCurrent }">{{day.number}}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WeekCalendar',
  props: {
    days: {
      type: Array,
      required: true
    }
  }
}
</script>

<style>
.week-days {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  width: 100%;
}

.day-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 14.28%;
}

.day-name {
  font-size: 26rpx;
  color: #999999;
  margin-bottom: 10rpx;
}

.day-number {
  font-size: 30rpx;
  color: #333333;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.current-day .day-name {
  color: #1EBD85;
}

.current-number {
  color: #FFFFFF !important;
  background-color: #1EBD85;
  border-radius: 50%;
}
</style>